﻿<div class="page">
    <header class="bar bar-nav">
        <h1 class='title'>Pull to refresh</h1>
    </header>
    <div class="content pull-to-refresh-content" data-ptr-distance="55">
        <div class="pull-to-refresh-layer">
            <div class="preloader"></div>
            <div class="pull-to-refresh-arrow"></div>
        </div>
        <div class="card">
            <div class="card-header">card</div>
            <div class="card-content">
                <div class="card-content-inner">
                    Hello there! I am a card;
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(document).on('refresh', '.pull-to-refresh-content', function (e) {
                setTimeout(function () {
                    var cardHTML = '<div class="card">' +
                '<div class="card-header">New Card</div>' +
                '<div class="card-content">' +
                    '<div class="card-content-inner">' +
                        'Hello! I am the new card!' + (Math.random() * 1000000) + '</div>' + '</div>' + '</div>';

                    $(e.target).find('.card').replaceWith(cardHTML);
                    // done
                    $.pullToRefreshDone('.pull-to-refresh-content');
                }, 2000);
            });

            $.init();
        })

    </script>
</div>